<template>
  <div>
    <img v-if="!hide" class="w-16 h-16 cursor-pointer" :src="cover" @click="playFile" alt="" />
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 600px"
        :title="title"
        closable
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        :on-close="onClose"
      >
        <video
          v-if="type === 'video'"
          controls
          ref="fileRef"
          style="height: 500px; width: 100%"
          :src="src"
        ></video>
        <audio
          v-if="type === 'audio'"
          controls
          ref="fileRef"
          style="width: 100%"
          :src="src"
        ></audio>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import defaultCover from '@/assets/images/audio-play.png';

defineProps({
  src: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'video',
  },
  cover: {
    type: String,
    default: defaultCover,
  },
  title: {
    type: String,
    default: '播放文件',
  },
  hide: {
    type: Boolean,
    default: false,
  },
});

const showModal = ref(false);
const fileRef = ref(null);

const playFile = () => {
  showModal.value = true;
};

const onClose = () => {
  showModal.value = false;
  if (fileRef.value) {
    fileRef.value.pause();
  }
};
</script>

<style scoped lang="less"></style>
